<template>
  <div>


    <el-dialog
      title="查看照片"
      :visible.sync="dialogVisible"
      width="18%"
      >
      <div class="demo-image__preview">
        <el-image
          style="width: 300px;"
          :src="url"
           :preview-src-list="srcList"
           :z-index="3000"
          >
        </el-image>
      </div>

    </el-dialog>

  <el-divider content-position="left"><span style="font-size: 1.15rem;">学生管理</span><span style="margin-left: 1rem;margin-right:1rem;"></span>
    <template>
      <el-select v-model="value" clearable placeholder="选择班级" @change="changbj" size="medium">
        <el-option
          v-for="item,idx in options"
          :key="idx"
          :label="item.name"
          :value="item.id"
          >
        </el-option>
      </el-select>
    </template>
  </el-divider>


  <el-row v-if="pageParams.bjId">
    <my-table  listPath="student/page" savePath="student/save" deletePath="student/delete" labelwidth="52px" @crrent-Row="currrow" :table="table" :pageParams="pageParams" :rules="rules" dialogTitle="对话框" :pageSize="[5,10,20,35,50]" :dialogForm="form" @show-dialog="bjidval">
      <template v-slot:dialogSlot>
          <el-form-item label="学号" prop="stuNo">
              <el-input v-model="form.stuNo" clearable ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
           <el-select v-model="form.sex" clearable placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
         </el-form-item>

         <div >
         <el-upload
           class="upload-demo"
           action="aaaa"
           :before-upload="upload"
           :limit="1"
           >
           <el-form-item label="上传">
              <el-button size="" type="infor" plain style="width: 18.3rem;">点击上传 <span style="font-size: 0.8rem;">(只能上传jpg/png文件)</span> </el-button>
           </el-form-item>
         </el-upload>
         <el-alert style="" v-if="upName"
           :title="upName"
           type="info"
           :closable="false">
           </el-alert>
         </div>
      </template>
      <template v-slot:mybutton>
           <el-button type="primary" @click="reset()" icon="el-icon-refresh" plain :disabled="!currRow"  size="small">重置密码</el-button>
      </template>

      <template v-slot:tableColumn >
         <el-table-column width="200px" >
            <template slot="header" slot-scope="scope">
                <span>操作</span>
            </template>
            <template slot-scope="scope" style="text-align: center;">
                <el-button v-if="scope.row.filename" size="small" plain type="primary"   @click="TFimg(scope.row.id)"><i class="el-icon-s-custom"></i>  查看照片</el-button>
                <el-button v-else size="small" plain type="success" disabled><i class="el-icon-s-promotion"></i>     暂无照片</el-button>
            </template>
        </el-table-column>
      </template>
    </my-table>
  </el-row>
</div>
</template>

<script>
  import myTable from '../../components/myTable.vue';
  import {mapState,mapMutations} from 'vuex';
  export default{
    components:{myTable},
    data() {
      return {
         option: [{
                  value: '男',
                  label: '男'
                }, {
                  value: '女',
                  label: '女'
                }],

        srcList:[],

        currRow:null,
        url:'',
        dialogVisible:false,
        options:[],
        value:'',
        pageParams:{
             limit:10,
             page:1,
             sort:'id',
             order:'asc',
             search:'',
             bjId:'',
         },
         form:{
            bjId:'',
            stuNo:'',
            name:'',
            sex:''
         },
         anyParmas:{

         }
         ,
        table:[
          {
            title:'学号',
            field:'stuNo'
          },
          {
            title:'姓名',
            field:'name'
          },
          {
            title:'性别',
            field:'sex'
          },

        ],
        rules:{
          stuNo: [{ required: true, message: '请输入学号', trigger: 'change' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'change' },
                 {required: true,pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,message: '姓名不支持特殊字符',trigger: 'change'}],
          sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        },
        upName:''
      }
    },
    methods:{
      ...mapMutations(['setAnyParams']),
      reset(){
       this.$confirm('是否重置此条数据密码', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'info'
           }).then(() => {
             this.$ajax.post('student/reset',this.currRow).then(res=>{
               var result=res.data;
               if(result.success){
                this.$notify({
                  title: '提示',
                  message: '密码重置成功',
                  type: 'success',
                  position: 'bottom-right'
                });
               }
             }).catch(err=>{
               this.$message({
                 type: 'error',
                 message: '重置失败'
               });
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消重置密码'
             });
           });

      },



      currrow(row){
        this.currRow=row;
      },
      TFimg(id){
        this.srcList.splice(0,1);
        this.url=this.baseUrl+"student/download?id="+id;
        this.srcList.push(this.baseUrl+"student/download?id="+id);
        this.dialogVisible=true
      },
      changbj(val){
        this.pageParams.bjId=false;
         this.$nextTick(() => {
           this.pageParams.bjId=val;
           this.form.bjId=this.pageParams.bjId;
      });
      },
      upload(file){
        this.upName=file.name;
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;
         if (!isLt2M) {
           this.$message.error('上传图片大小不能超过 2MB!');
         }
        this.setAnyParams({"file":file});
        return false
      },
      bjidval(){
        this.upName=false;
        this.form.bjId=this.pageParams.bjId;
      }

    }
    ,
    created() {
			var role =window.sessionStorage.getItem("role")
			if(role!=='ROLE_ADMIN'){
				this.$router.back();
			}

      this.$ajax.post("tbClass/list",{}).then(res=>{
        var result = res.data;
          this.options=result.data;
        })
      }
   }


</script>

<style scoped>

</style>
